<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <v-data-table v-model="table.selected" select-all :headers="table.headers" :items="table.item" class="elevation-1" :total-items="table.totalItems" :pagination.sync="table.pagination" :rows-per-page-items="[10,20,30,40,50]" rows-per-page-text="10">
      <template v-slot:items="props">
        <td><v-checkbox v-model="props.selected" primary hide-details></v-checkbox></td>
        <td><v-icon small class="mr-2" @click="edit(props.index)">edit</v-icon></td>
        <td>{{ typeMap[props.item.type] }}</td>
        <td>{{ props.item.title }}</td>
        <td>{{ props.item.description }}</td>
        <td>{{ props.item.watchCount }}</td>
        <td>{{ props.item.likeCount }}</td>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import { setTableHeight } from '../../utils/table'
import { mapGetters } from 'vuex'
import { getArticle, deleteArticle } from '../../api/article'
export default {
  name: 'Table',
  props: {
    title: {},
    type: {}
  },
  data: () => ({
    typeMap: ['知识视窗', '校园体育'],
    table: {
      selected: [],
      headers: [
        { text: '操作', sortable: false, value: 'action', align: 'center' },
        { text: '类型', sortable: false, value: 'type', align: 'center' },
        { text: '标题', sortable: false, value: 'title', align: 'center' },
        { text: '描述', sortable: false, value: 'description', align: 'center' },
        { text: '观看数', sortable: false, value: 'watchCount', align: 'center' },
        { text: '喜欢数', sortable: false, value: 'likeCount', align: 'center' }
      ],
      item: [],
      totalItems: 0,
      pagination: {}
    }
  }),
  methods: {
    update () {
      getArticle(this.title, this.type, this.table.pagination.rowsPerPage, this.table.pagination.page).then((res) => {
        this.table.item = []
        if (res.data.data !== null) {
          this.table.item = res.data.data
        }
        this.table.totalItems = res.data.count
      })
    },
    edit (index) {
      let data = {
        id: this.table.item[index].id,
        type: this.table.item[index].type,
        thumbnailUrl: this.table.item[index].thumbnailUrl,
        videoKey: this.table.item[index].videoKey,
        title: this.table.item[index].title,
        description: this.table.item[index].description,
        content: this.table.item[index].content
      }
      this.$emit('edit', data)
    },
    deleteArticle () {
      if (this.table.selected.length === 0) {
        return
      }
      let id = []
      for (let i = 0; i < this.table.selected.length; i++) {
        id.push(this.table.selected[i].id)
      }
      deleteArticle(id).then((res) => {
        this.update()
      })
    }
  },
  mounted () {
    setTableHeight(document.documentElement.clientHeight)
  },
  computed: {
    ...mapGetters([
      'fullHeight',
      'fullWidth'
    ])
  },
  watch: {
    fullHeight: function (val) {
      setTableHeight(val)
    },
    fullWidth: function (val) {
      setTableHeight(this.fullHeight)
    },
    'table.pagination': {
      handler () {
        this.update()
      },
      deep: true
    }
  }
}
</script>

<style scoped>
@import "../../style/table.css";
</style>
